<template>
	<view class="warningcontrol">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="enterprise-control">
			<view class="total-data">
				共 <text>{{total}}</text> 条数据
			</view>

			<noData v-if="dataList.length==0" />
			<view class="item" v-for="item in dataList" :key="item.id" @click="jumpDetail(item.id,item.colorlevel)">
				<view class="warning-type"
					:style="item.colorlevel==1?'background:#FF0000':item.colorlevel==2?'background:#FF9000':item.colorlevel==3?'background:#FFCC00':''">
					{{item.colorlevel==1?'红色预警':item.colorlevel==2?'橙色预警':item.colorlevel==3?'黄色预警':''}}
				</view>
				<view class="title">{{item.title}}</view>
				<view class="issue">{{item.publisher}}</view>
				<view class="detail">
					<view class="padding">
						<view class="time">管控时间：{{item.publishdate?.split(' ')[0]}}</view>
						<view class="search"><text>查看详情</text>
							<image
								src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/right-arrow.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'

	import http from '../../request/index.js'
	import {
		ref
	} from 'vue'
	let name = "预警管控"

	let total = ref('')
	let single = ''
	let dataList = ref([{}])

	let jumpDetail = (id, color) => {

		uni.navigateTo({
			url: `/contorllerPageOther/warningcontroldetail/warningcontroldetail?id=${id}&color=${color}`
		})
	}

	let getList = () => {
		http({
			url: '/notice/datalist',
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
				total.value = res.data.total
			}

		})
	}
	getList()
</script>

<style lang="scss" scoped>
	.warningcontrol {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.enterprise-control {
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;
			overflow: scroll;
			padding: 0rpx 36rpx 80rpx 36rpx;

			.total-data {
				margin-top: 22rpx;
				margin-bottom: 22rpx;
				padding-left: 16rpx;
				font-weight: 400;
				font-size: 23rpx;
				color: #333333;

				text {
					color: #0874FA;
				}
			}

			.item:nth-of-type(2) {
				margin: 0rpx !important;
			}

			.item {
				background-color: #fff;
				padding-bottom: 35rpx;
				margin-top: 34rpx;
				width: 678rpx;
				height: 294rpx;

				border-radius: 14rpx;

				.warning-type {

					height: 53rpx;

					border-radius: 14rpx 14rpx 0rpx 0rpx;
					text-align: center;
					line-height: 53rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;

				}

				.title {
					padding-left: 34rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #000000;
					margin-top: 30rpx;
					margin-bottom: 22rpx;

				}

				.issue {
					padding-left: 34rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					margin-bottom: 32rpx;

				}

				.detail {
					padding-left: 34rpx;

					padding-right: 37rpx;

					.padding {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-top: 2rpx solid #EDEBEB;
						padding-top: 22rpx;

						.time {

							font-weight: 400;
							font-size: 25rpx;
							color: #666666;

						}

						.search {
							display: flex;
							align-items: center;

							text {

								font-weight: 400;
								font-size: 25rpx;
								color: #C1C0C0;

							}

							image {
								width: 12rpx;
								height: 20rpx;
								margin-left: 17rpx;
							}
						}
					}
				}
			}
		}

	}
</style>